import React from 'react';

import style from './register.module.scss'
import  {Form,Button,Input} from 'antd'
import request from "../../http/request";
import { useNavigate} from 'react-router-dom'
const Register = () => {

    const [form]=Form.useForm()
    const navigate=useNavigate()

    const onFinish = (values: any) => {
        console.log('Success:', values);

        request.get("/api/login",{
            params:values
        }).then((data:any)=>{
            console.log("data",data)
        })

    };


    const backlogin=()=>{
        navigate("/login")
    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //密码校验
    const validatorFunc=(rule:any, value:string)=>{


        console.log( form.getFieldValue("repassword"))

       return  Promise.resolve()


    }

    return (
        <div className={style.main}>
            <div className={style.loginBox}>
                <div className={style.title}>注册账号</div>
                <Form
                    name="basic"
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 13 }}
                    style={{ maxWidth: 500 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' },{validator:validatorFunc}]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="再次确认密码"
                        name="repassword"
                        rules={[{ required: true, message: '请再次输入密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[{ required: true, message: '请输入有效邮箱!',type:"email" }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: '请输入有效手机号!'  }, {
                            pattern: /^1\d{10}$/,
                            message: '请输入有效的手机号！',
                        },]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="地址"
                        name="address"
                        rules={[{ required: true, message: '请输入地址!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name="gender"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>



                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button  style={{width:"150px"}}  type="primary"  htmlType="submit">注册</Button>

                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button  onClick={()=>backlogin()}    style={{width:"150px"}}  type="primary"  >返回登录</Button>

                    </Form.Item>

                </Form>







            </div>
        </div>

    );
};



export default Register;